import React, { useState, ChangeEvent } from 'react';
import { useNavigate, useLocation, useSearchParams } from 'react-router-dom';
import { Input } from 'antd';
const { Search } = Input;

export default function ListSearch() {
    const navigate = useNavigate();
    const location = useLocation();
    const [searchParams] = useSearchParams();
    const [value, setValue] = useState<string>(
        searchParams.get('keyword') || ''
    );
    const onSearch = (val: string) => {
        navigate({
            pathname: location.pathname,
            search: `?keyword=${val}`,
        });
    };
    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
        setValue(e.target.value);
    };
    return (
        <div>
            <Search
                placeholder="输入关键字"
                onSearch={onSearch}
                onChange={handleChange}
                value={value}
                size="large"
                enterButton
                allowClear
            />
        </div>
    );
}
